
//填充历史趋势图
var chart1 = null
var _date_date_ = 'sec'
// chart 1
var options = {
	series: null,
	chart: {
		foreColor: '#9ba7b2',
		type: 'line',
		height: 540,
		animations: {
			enabled: false
		},
		toolbar: {
			show: true
		},
		zoom: {
			enabled: true
		},
		dropShadow: {
			enabled: false,
			top: 3,
			left: 14,
			blur: 4,
			opacity: 0.10,
		}
	},
	legend: {
		position: 'top',
		horizontalAlign: 'left',
		offsetX: -25
	},
	dataLabels: {
		enabled: false
	},
	stroke: {
		show: true,
		width: 2.3,
		//: 'smooth',
	},
	tooltip: {
		theme: 'dark',
		y: {
			formatter: function (val) {
				return val + '毫秒'
			}
		},
		x: {
			formatter: function (val) {
				return val + map[_date_date_]
			}
		}
	},
	yaxis: {
		max: 100,
		min: 0,
		labels: {
			formatter: function (value) {
				return Math.round(value) + "毫秒";
			}
		},
	},
	xaxis: {
		categories: [],
		labels: {
			formatter: function (value) {
				if (options.xaxis.categories.length <= 10)
					sep = 1
				else
					sep = Math.ceil(options.xaxis.categories.length / 10)

				if (options.xaxis.categories.indexOf(value) % sep == 0)
					try {
						return value.split(' ')[1] + map[_date_date_]
					}
					catch (ex) {
						console.log(value)
					}

				else return "";
			}
		},
	}
};
var map = { 'year': '月', 'day': '时', 'month': '日', 'min': '分', 'sec': '秒', 'hour': '分', 'sec': '秒', 'week': '日' }
var series=[]
var xaxis=[]
const render_char_1 = function (data_date) {
	
	$.ajax({
		type: 'GET',
		url: '/pinglog',
		data: {
			data_date: data_date
		},
		success: function (data) {
			_date_date_ = data_date
			series=data.series
			xaxis=data.dates
			options.series = data.series
			options.xaxis.categories = data.dates
			if (chart1) chart1.destroy()
			chart1 = new ApexCharts(document.querySelector("#chart1"), options);
			chart1.render();
			
		},
		dataType: 'json',
		error: function (xthr, err, msg) {
			alert(msg)
		}
	});

}
const update_char_1 = function (data_date) {
	$.ajax({
		type: 'GET',
		url: '/pinglog',
		data: {
			data_date: data_date
		},
		success: function (data) {
			series=data.series
			xaxis=data.dates
			chart1.updateOptions({
				series: data.series,
				xaxis: {
					categories: data.dates,
					labels: {
						formatter: function (value) {
							if (xaxis.length <= 10)
								sep = 1
							else
								sep = Math.ceil(xaxis.length / 10)
			
							if (xaxis.indexOf(value) % sep == 0)
								try {
									return value.split(' ')[1] + map[_date_date_]
								}
								catch (ex) {
									console.log(value)
								}
			
							else return "";
						}
					},
				}})
		},
		dataType: 'json',
		error: function (xthr, err, msg) {
			alert(msg)
		}
	});

}
var st = null;
$(document).ready(function () {
	render_char_1(_date_date_)
	$('#refresh_button').click(function () {
		if ($(this).text() == "定时刷新") {
			$(this).text('停止刷新')
			st = setInterval("update_char_1(_date_date_)", 5000)
		} else {
			$(this).text('定时刷新')
			clearInterval(st)
			st = null
		}
	})
});

